<template>
  <div class="index-page"
       @click="rightshow=false">
    <el-container class="container">
      <el-aside class="aside"
                width="220px">
        <div class="logo">
          <img src="../assets/images/logo.png"
               alt="">
          <h2>欧源相亲管理系统</h2>
        </div>

        <el-menu :collapse-transition='false'
                 :collapse="isCollapse"
                 router
                 :default-active="nowIndex"
                 class="el-menu-vertical-demo"
                 @open="handleOpen"
                 @close="handleClose"
                 background-color="#304156"
                 text-color="#fff"
                 active-text-color="#1890ff">

          <template v-for="menu in List">
            <el-submenu :index="'/index/'+menu.path"
                        :key="menu.path"
                        v-if="menu.children">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{menu.meta.title}}</span>
              </template>

              <template v-for="item in menu.children">
                <el-menu-item :index="'/index/'+item.path"
                              :key="item.path"
                              v-if="!item.hidden"
                              class="second">
                  <i :class="'iconfont icon-'+item.meta.icon"></i>&nbsp;
                  {{item.meta.title}}
                </el-menu-item>
              </template>
            </el-submenu>

            <el-menu-item :index="'/index/'+ menu.path"
                          :key="menu.path"
                          v-if="!menu.children">
              <i :class="'iconfont icon-'+menu.meta.icon"></i>&nbsp;
              <span slot="title">{{menu.meta.title}}</span>
            </el-menu-item>
          </template>

        </el-menu>

      </el-aside>
      <!--  -->
      <el-main class="maincontainer">
        <div class="navbar">
          <div class="baritem">
            <el-button @click="isCollapse=!isCollapse"
                       type="text"
                       class="iconbar">
              <span class="iconfont icon-shousuo lefticon"></span>
            </el-button>
            <div class="barbtn">

              <el-button type="text"
                         class="nav_item"
                         :icon="'iconfont icon-'+el.meta.icon"
                         v-for="(el,index) in menuList"
                         :key="index"
                         :class="{active_btn:selectIndex==index}"
                         @click="selectIndex=index">{{el.meta.title}}</el-button>

            </div>
          </div>
          <div class="userinfo">
            <div class="usersel">

              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <div class="img">
                    <el-avatar class="avatar_img"
                               src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    <i class="el-icon-caret-bottom user-icon"></i>
                  </div>

                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>布局设置</el-dropdown-item>
                  <el-dropdown-item>帮助</el-dropdown-item>

                  <el-dropdown-item divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="history"
             @mousewheel="tagsroll">
          <el-scrollbar :vertical='false'
                        ref='scroll'
                        style="width:auto;white-space:nowrap">
            <div class="tag-group">
              <template v-for="(el,index) in historyList">
                <router-link :key="el.path"
                             :to='el.path'>
                  <el-tag @contextmenu.native.prevent='mouseright($event,el,index)'
                          :closable="el.title!='首页'"
                          size="small"
                          effect="plain"
                          class="item"
                          :class="{active:el.status}"
                          @close.prevent="closeitem(el,index)">
                    {{el.title}}
                  </el-tag>
                </router-link>
              </template>

            </div>

          </el-scrollbar>
          <ul v-show='rightshow'
              :style="{left:x,top:y}"
              class="mouseright">
            <li @click="refresh">刷新页面</li>
            <li @click='closecurrent'
                v-show="isindex">关闭当前</li>
            <li @click='closeother'>关闭其他</li>
            <li v-show="closeflag"
                @click="closeright">关闭右侧</li>
            <li @click='closeAll'>关闭所有</li>
          </ul>
        </div>
        <div class="content">
          <transition mode="out-in"
                      name="fade">
            <router-view :key="timer"></router-view>
          </transition>

        </div>

      </el-main>
    </el-container>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      menuList: [],
      selectIndex: 0,
      List: [],
      // 历史记录:
      historyList: [{ title: '首页', path: '/index/', status: true }],
      nowIndex: null,
      x: 0,
      y: 0,
      rightshow: false,
      rightstyle: {},
      timer: Date.now(),
      closeflag: true,
      // 是否是首页
      isindex: true
    }
  },
  async mounted() {
    const data = await this.$axios.get('/getInfo')
    const { data: res } = await this.$axios.get('/getRouters')
    this.menuList = res.data
    this.List = this.menuList[this.selectIndex].children
    if (sessionStorage.getItem('old_history') != null) {
      this.historyList = JSON.parse(sessionStorage.getItem('old_history'))
    }
  },
  methods: {
    // 关闭所有
    closeAll() {
      this.historyList = this.historyList.filter((el) => el.path == '/index/')
      if (!this.historyList[0].status) {
        this.$router.push(this.historyList[0].path)
      }
    },
    // 关闭其他
    closeother() {
      this.historyList = this.historyList.filter((el) => el.path == this.item.path || el.path == '/index/')
      if (!this.item.status) {
        this.$router.push(this.item.path)
      }
    },
    // 关闭右侧
    closeright() {
      this.historyList = this.historyList.filter((el, index) => index < this.index + 1)
      if (!this.item.status) {
        this.$router.push(this.item.path)
      }
    },
    // 刷新
    refresh() {
      this.timer = Date.now()
    },
    // 滚动条
    tagsroll(event) {
      const scroll = this.$refs.scroll.wrap
      scroll.scrollLeft = event.wheelDelta / 3
    },
    // 关闭
    closecurrent() {
      this.closeitem(this.item, this.index)
    },
    closeitem(item, index) {
      let nowPath = null
      this.historyList = this.historyList.filter((el) => el.path != item.path)
      if (item.status) {
        this.historyList[this.historyList.length - 1].status = true
        nowPath = this.historyList[this.historyList.length - 1]
        this.$router.push(nowPath)
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    mouseright(e, item, index) {
      console.log(e)
      this.item = item
      this.index = index
      this.rightshow = true
      this.x = e.clientX + 'px'
      this.y = e.clientY + 'px'
      if (index == this.historyList.length - 1) {
        this.closeflag = false
      } else {
        this.closeflag = true
      }
      if (index == 0) {
        this.isindex = false
      } else {
        this.isindex = true
      }
    }
  },
  watch: {
    selectIndex(val) {
      this.List = this.menuList[this.selectIndex].children
    },
    $route(val) {
      this.nowIndex = val.path
      this.historyList.forEach((el) => (el.status = false))
      console.log(val)
      let history = this.historyList.find((el) => el.path == val.path)
      if (history) {
        history.status = true
      } else {
        this.historyList.push({ title: val.meta.title, path: val.path, status: true })
      }

      if (history && history.path == '/index/') {
        sessionStorage.setItem('old_history', JSON.stringify([history]))
      }
      if (!history || history.path != '/index/') {
        sessionStorage.setItem('old_history', JSON.stringify([{ title: '首页', path: '/index/', status: false }, history || { title: val.meta.title, path: val.path, status: true }]))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 设置动画
.fade-level-active,
.fade-enter-active {
  transition: all 0.5s;
}
.fade-level-to {
  opacity: 0;
  transform: translateX(30px);
}
.fade-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.container {
  width: 100vw;
  height: 100vh;
  .aside {
    background-color: #304156;
    .logo {
      height: 60px;
      box-sizing: border-box;
      background-color: #fff;
      // padding: 10px 5px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
    }
  }
  .maincontainer {
    padding: 0;
    .navbar {
      background-color: #fff;
      z-index: 999;
      position: fixed;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      width: 100%;
      height: 60px;
      display: flex;
      // justify-content: space-between;
      .baritem {
        width: 75%;
        display: flex;
        .iconbar {
          width: 50px;
          height: 60px;
          padding: 0;
          .lefticon {
            color: black;
            font-size: 20px;
          }
        }
        .barbtn {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .nav_item {
            display: flex;
            margin-left: 24px;
            font-size: 16px;
            width: 90px;
            justify-content: space-between;
            color: #999093;
          }
          .active_btn {
            color: #303133;
            border-bottom: 2px solid blue;
            border-radius: 0;
          }
        }
      }
      .userinfo {
        margin-right: 30px;
        .img {
          height: 60px;
          position: relative;
          right: 10px;
          .avatar_img {
            margin-top: 10px;
          }
          .user-icon {
            position: absolute;
            bottom: 6px;
          }
        }
        .img:hover {
          background-color: #f9f9f9;
        }
      }
    }
    .history {
      background: #fff;
      position: fixed;
      z-index: 999;
      width: 100%;
      top: 60px;
      height: 32px;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
      .tag-group {
        height: 32px;
        display: flex;
        align-items: center;
        .item {
          margin-left: 14px;
          color: #495060;
          border-color: #ccc;
        }
        .active {
          background-color: #1890ff;
          color: #fff;
          &::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
          }
        }
      }
      .mouseright {
        background-color: #fff;
        position: absolute;
        width: 80px;
        font-size: 12px;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
        li {
          color: #333333;
          margin: 0;
          padding: 7px 16px;
          cursor: pointer;
          &:hover {
            background-color: #eeeeee;
          }
        }
      }
    }
    .content {
      margin-top: 95px;
    }
  }
}
</style>